<template>
  <div class="swapper-head">
    <div class="swapper-center">
      <div class="swapper-left media-left">
        <!-- <h2>2022 Mustang EcoBoost® Premium Fastback</h2> -->
        <h2 v-html="sets"></h2>
        <button class="view-btn" @click="addcart"><i style="font-family:'黑体';font-weight:bolder;">添 加 购 物 车</i></button>
        <button class="build-btn" @click="buycar"><i style="font-family:'黑体';font-weight:bolder;">立 即 购 买</i></button>
      </div>
      <div class="swapper-right">
        <div class="swapper-body">
          <el-carousel :interval="5000" arrow="always" v-if="swapperimglist[0]">
            <el-carousel-item v-for="item in swapperimglist" :key="item.id">
              <img :src="item.url" alt="" />
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { request } from "network/request.js";

export default {
  props: {
    id: {
      type: String,
      default: "s1",
    },
  },
  data() {
    return {
      carid: this.id,
      swapperimglistnochoose: this.swapperlist,
      swapperimglist: [],
      sets: "",
    };
  },
  methods: {
    buycar() {
        this.$emit("buycar")
    },
    addcart() {
      this.$emit("addcart")
    }
  },
  mounted() {
    request(this.carid).then((res) => {
      // console.log(res.data[0].dealswapperlist);
      this.swapperimglist = res.data[0].dealswapperlist;
      this.sets = res.data[0].sets;
    });
  },
};
</script>

<style lang="scss" scoped>
img {
  width: 100%;
  height: 100%;
  vertical-align: top;
}
.swapper-head {
  width: 100%;
  /* background-color: red; */
}
.swapper-center {
  max-width: 1100px;
  min-height: 350px;
  margin: 0 auto;
  display: flex;
}
.swapper-left {
  width: 45%;
  /* background-color: pink; */
  display: flex;
  flex-direction: column;
  padding-top: 30px;
}
.swapper-left h2 {
  font-size: 36px;
  color: #1b394e;
  font-weight: 600;
  white-space: normal;
  margin-bottom: 5%;
}
.view-btn {
  margin-bottom: 3%;
  background-color: #0276b3;
  color: white;
  border: none;
}
.build-btn {
  background-color: #fff;
  border: 1px solid #0276b3;
  color: #0276b3;
  transition: 0.5s linear;
  transform-origin: center;
}
.build-btn:hover {
  border: 1px solid #1b394e;
  color: #1b394e;
}
.swapper-left button {
  width: 55%;
  height: 50px;
  font-size: 16px;
  /* margin:40px 0 0 0; */
}

.swapper-right {
  width: 55%;
  /* background-color: blue; */
}
.swapper-body {
  width: 90%;
  /* background-color: green; */
  height: 100%;
  box-sizing: border-box;
  margin: 0 auto;
}
.el-carousel {
  /* height:100%; */
}
.el-carousel__container {
  height: 100%;
}
.el-carousel-item {
  height: 100%;
}
@media screen and (max-width: 768px) {
  .swapper-center {
    flex-direction: column;
  }
  .swapper-left {
    width: 100%;
    padding-top: 0px;
    text-align: center;
    & > h2 {
      font-size: 30px;
      width: 90%;
      margin: 0 auto;
      // background-color: red;
    }
  }
  .view-btn {
    margin-top: 5%;
    margin-bottom: 1%;
  }
  button {
    // background-color: red;
    margin: 0 auto;
    // position: absolute;
  }
  .swapper-right {
    width: 100%;
    margin-top: 4%;
  }
}
</style>